<template>
	<div class="choose-video-wrapper">
		<el-row>
			<el-col :span="4">
				<div class="grid-content bg-purple">静默视频</div>
			</el-col>
			<el-col :span="20">
				<el-button class="choose-btn" @click="selectVideo('silent')" :disabled="showDetail">
					<span>{{ getSilentText }} </span>
					<span class="tips" v-if="silentVideoName">{{ silentVideoName }}</span>
				</el-button>
			</el-col>
		</el-row>
		<el-row v-if="videoType === 'video-switching'">
			<el-col :span="4">
				<div class="grid-content bg-purple">播报视频</div>
			</el-col>
			<el-col :span="20">
				<el-button class="choose-btn" @click="selectVideo('talking')" :disabled="showDetail">
					<span>{{ getTalkingText }}</span>
					<span class="tips" v-if="talkingVideoName">{{ talkingVideoName }}</span>
				</el-button>
			</el-col>
		</el-row>

		<VideoTable v-if="tableVideoDialog" :tableVideoDialog.sync="tableVideoDialog" :videoType="tableVideoType" :videoSlect="videoSlect" @ok="sureVideoData" :showDetail="showDetail" />
	</div>
</template>

<script>
import VideoTable from '@/views/components/VideoTable.vue';
import AIWorkflow from '@/modules/workFlow.js';
import { splitName } from '@/modules/utils';

export default {
	props: {
		videoType: {
			type: String,
			default: () => ''
		},
		showDetail: {
			type: Boolean,
			default: () => false
		}
	},
	components: {
		VideoTable
	},

	watch: {
		videoType: {
			handler(newVal, oldVal) {
				console.log('###video Type',newVal,oldVal);
				if (newVal && oldVal) {
					this.talkingVideoName = null;
					this.silentVideoName = null;
				}
				// 预录制视频，则选择的是静默视频
				if ( newVal && newVal === 'pre-recorded-video'){
					this.robotPropertyVideoType = newVal;
				}
				// 视频切换， 则选择的是眨眼视频和播报视频
				if ( newVal && newVal === 'video-switching'){
					this.robotPropertyVideoType = newVal;
				}
				// 第一次打开，则默认是
				if (!newVal && oldVal){
					this.robotPropertyVideoType = oldVal;
				}
				// 切换则清除曾经选中的视频id
				this.videoSlect = '';
				this.silentSelectVideoId = '';
				this.talkingSelectVideoId = '';
			},
			immediate:true
		}
	},

	mounted() {
		if (AIWorkflow && AIWorkflow.getTalkingVideoSource()) {
			const { fileName = null } = AIWorkflow.getTalkingVideoSource();
			this.talkingVideoName = fileName;
		}
		if (AIWorkflow && AIWorkflow.getSilentVideoSource()) {
			const { fileName = null } = AIWorkflow.getSilentVideoSource();
			this.silentVideoName = fileName;
		}
		// 初始化赋值选择的视频名字
		if (AIWorkflow.getRobotProperty()){
			if (AIWorkflow.getRobotProperty().silentVideo){
				this.silentVideoName = AIWorkflow.getRobotProperty().silentVideo.fileName;
				this.silentSelectVideoId = AIWorkflow.getRobotProperty().silentVideo.id;
			}
			if (AIWorkflow.getRobotProperty().talkingVideo){
				this.talkingVideoName = AIWorkflow.getRobotProperty().talkingVideo.fileName;
				this.talkingSelectVideoId = AIWorkflow.getRobotProperty().talkingVideo.id;
			}
		}
	},

	computed: {
		getSilentText() {
			return !this.silentVideoName ? '选择静默视频' : splitName(this.silentVideoName, 3, -1);
		},
		getTalkingText() {
			return !this.talkingVideoName ? '选择播报视频' : splitName(this.talkingVideoName, 3, -1);
		}
	},
	data() {
		return {
			videoSlect:'',// 当前选中的视频id
			tableVideoDialog: false,
			tableVideoType: '', // 选择的视频模式，是静默还是播报视频
			silentVideoName: null,
			talkingVideoName: null,
			robotPropertyVideoType:'', // 设置机器人全局模式
			silentSelectVideoId:'', // 静默视频id
			talkingSelectVideoId:'' // 播报视频id
		};
	},
	methods: {
		selectVideo(type) {
			console.log('select video',type);
			if (type === 'silent'){
				this.videoSlect = this.silentSelectVideoId;
			} else if (type === 'talking'){
				this.videoSlect = this.talkingSelectVideoId;
			}
			this.tableVideoType = type;
			this.tableVideoDialog = !this.tableVideoDialog;
		},
		sureVideoData(id, data) {
			console.log('sureVideoData', data, this.tableVideoType);
			if (this.tableVideoType === 'silent') {
				this.silentVideoName = data.fileName;
				this.silentSelectVideoId = data.id;
				AIWorkflow.setRobotProperty({ silentVideo: {id:data.id,content:data.description,url:data.url,fileName:data.fileName} });
				AIWorkflow.setSilentVideoSource(data);
			} else {
				this.talkingSelectVideoId = data.id;
				this.talkingVideoName = data.fileName;
				AIWorkflow.setRobotProperty({ talkingVideo: {id:data.id,content:data.description,url:data.url,fileName:data.fileName} });
				AIWorkflow.setTalkingVideoSource(data);
			}
			this.tableVideoDialog = false;
		}
	}
};
</script>
<style lang="less" scoped>
.choose-video-wrapper {
}
.choose-btn {
	padding: 10px;
}
.el-col {
	padding: 10px 0;
}
.choose-btn:hover .tips {
	display: inline-block;
}
.tips {
	position: absolute;
	left: 25%;
	bottom: -40px;
	padding: 10px;
	display: none;
	width: auto;
	max-width: 400px;
	background: #f6f6f6;
	border: 1px solid #d3d3d3;
	box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.09);
	border-radius: 4px;
	z-index: 100;
	color: #000;
}
.grid-content {
	line-height: 32px;
}
</style>
